<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="sqlTitle">sql标题</nz-form-label>
    <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="sql标题不能为空且长度小于20">
      <input nz-input formControlName="sqlTitle" id="sqlTitle"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="productId">产品</nz-form-label>
    <nz-form-control [nzSm]="16" [nzXs]="24">
      <nz-select [formControlName]="'productId'" nzShowSearch>
        <nz-option nzValue="" nzLabel="请选择"></nz-option>
        <nz-option [nzValue]="p.pid" [nzLabel]="p.productName" *ngFor="let p of allProducts"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="schemaName">schema</nz-form-label>
    <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="schema不能为空">
      <input nz-input formControlName="schemaName" id="schemaName"/>
    </nz-form-control>
  </nz-form-item>
  <div nz-row>
    <div [nzSm]="4" [nzXs]="24" nz-col class="title">
      sql正文
    </div>
    <div [nzSm]="16" [nzXs]="24" nz-col class="sql-text-div" #editor>

    </div>
  </div>
  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="remark">备注</nz-form-label>
    <nz-form-control [nzSm]="16" [nzXs]="24" [nzErrorTip]="'备注不能大于'+remarkMaxLength+'字符'">
      <nz-textarea-count [nzMaxCharacterCount]="remarkMaxLength">
        <textarea rows="2" formControlName="remark" nz-input></textarea>
      </nz-textarea-count>
    </nz-form-control>
  </nz-form-item>
</form>
<nz-divider nzPlain nzText="使用情况" nzOrientation="left"></nz-divider>
<div nz-row nzJustify="center" class="product-project-header">
  <div nz-col [nzSm]="12">项目</div>
  <div nz-col [nzSm]="4">
    <button nz-button nzType="primary" [nzSize]="'small'" nzShape="round" (click)="isVisible=true" [disabled]="!productId">
      <i nz-icon nzType="plus"></i>
    </button>
  </div>
</div>
<div nz-row nzJustify="center" *ngFor="let pp of projects;let i = index" class="product-project-item"
>
  <div nz-col [nzSm]="12" [class.odd-row]="i%2===0">{{pp.projectName}}</div>
  <div nz-col [nzSm]="4" [class.odd-row]="i%2===0">
    <button nz-button nzType="primary" [nzSize]="'small'" nzShape="round" (click)="deleteProject(i)">
      <i nz-icon nzType="minus"></i>
    </button>
  </div>
</div>
<div nz-row class="save-button">
  <div [nzSm]="4" [nzXs]="24" nz-col>
  </div>
  <div [nzSm]="16" [nzXs]="24" nz-col>
    <button nz-button nzType="primary" [disabled]="!validateForm.valid || loading" nzShape="round"
            (click)="submitForm()">
      <i nz-icon nzType="save"></i>保存
    </button>
  </div>
</div>

<nz-modal [(nzVisible)]="isVisible" nzTitle="请选择" (nzOnCancel)="isVisible=false" [nzStyle]="{ width: '1000px' }"
          [nzFooter]="null">
  <ng-container *nzModalContent>
    <app-project-selection (cancel)="isVisible=false" [productId]="productId" [disable]="disabledIds"
                           (success)="selectProject($event)">
    </app-project-selection>
  </ng-container>
</nz-modal>
